<template>
  <div id="Recommend">
    <div class="recommend-title">周末去哪</div>
    <ul>
    	<li class="item border-bottom" v-for="item,index of weekendList" :key="item.id">
    		<div class="item-img-wrapper">
    			<img :src="item.imgUrl" class="item-img">
    		</div>
    		<div class="item-info">
    			<p class="item-title">{{item.title}}</p>
    			<p class="item-desc">{{item.desc}}</p>
    		</div>
    	</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props:{
    weekendList:Array
  },
  data(){
  	return{
  	}
  }
}
</script>

<style scoped>
.recommend-title{
	line-height: .8rem;
	background-color: #eee;
	text-indent: .2rem;
}
.item-img-wrapper{
	height: 0;
	overflow: hidden;
	padding-bottom: 37.09%;
}
.item-img{
	width: 100%;
}
.item-info{
	padding: .1rem;
}
.border-bottom{
	border-bottom: 1px solid #eee;
}
.item-title{
	line-height: .54rem;
	font-size: .32rem;
		  overflow:hidden; 
	      text-overflow:ellipsis;
	      display:-webkit-box; 
	      -webkit-box-orient:vertical;
	      -webkit-line-clamp:1; 
}
.item-desc{
	line-height: .4rem;
	color: #ccc;
		  overflow:hidden; 
	      text-overflow:ellipsis;
	      display:-webkit-box; 
	      -webkit-box-orient:vertical;
	      -webkit-line-clamp:1; 
}
</style>